import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useEffect, useRef, useState } from 'react';
import Taro from '@tarojs/taro';
import classNames from 'classnames';


const pages = [1, 2, 3, 4, 5]
export default function Index() {
  const height = useRef(0)
  const [elementY, setElementY] = useState(-603)
  const [touchStartY, setTouchStartY] = useState(0)
  const [touchMoveY, setTouchMoveY] = useState(0)
  const curPos = useRef(-603)
  const index = useRef(0)
  const timer = useRef<any>(null)
 

  const [active, setActive] = useState(false)
  const __transition = classNames(s.container,{
    [s.active]: active
  })

  function pageUp() {
    if (index.current < pages.length - 1) {
      index.current += 1
      setElementY(curPos.current - height.current)
      curPos.current -= height.current
    } else {
      index.current = 0
      setElementY(curPos.current - height.current)
      curPos.current = -height.current
      setTimeout(() => {
        setActive(false)
        setElementY(curPos.current)
      }, 300)
    }
  }

  function touchstart(e) {
    setTouchMoveY(e.touches[0].clientY);
    setTouchStartY(e.touches[0].clientY)
    setActive(false)
    clearInterval(timer.current)
  }
  
  function touchmove(e: any) {
    const disY = e.touches[0].clientY - touchMoveY
    setTouchMoveY(e.touches[0].clientY);
    setElementY(elementY + disY)
  }

  // 0, 1, 2, 3, 4，5     6 -> 0
  // -1 -> 5   0, 1, 2, 3, 4，5

  function touchend(e: any) {
    const _end = e.changedTouches[0].clientY
    if(_end - touchStartY >= 100) {
      index.current -= 1
      if (index.current >= 0) {
        setElementY(curPos.current + height.current)
        curPos.current += height.current
        console.log(_end - touchStartY, '向下')
      } else {
        index.current = pages.length - 1
        setElementY(curPos.current + height.current)
        curPos.current = index.current * (-height.current) - height.current
        setTimeout(() => {
          setActive(false)
          setElementY(curPos.current)
        }, 300)
      }
    } else if(_end - touchStartY <= -100) {
      pageUp()
    } else {
      setElementY(curPos.current)
    }
    setActive(true)
    timer.current = setInterval(() => {
      setActive(true)
      pageUp()
    }, 5000)
  }

  useEffect(() => {
    const query = Taro.createSelectorQuery()
    //获取初始 Y 坐标
    query.select('#draggable').boundingClientRect((res) => {
      // @ts-ignore
      setElementY(res.top)
    }).exec()
    //获取切换的元素的高，就可以知道切换到下一页的需要移动的位置
    query.select('#box').boundingClientRect((res) => {
      //@ts-ignore
      height.current = res.height
      setElementY(-height.current)
    })

    timer.current = setInterval(() => {
      setActive(true)
      pageUp()
    }, 5000)
  }, [])


  return (
    <View className={s.wrapper}>
      <View 
        className={__transition}
        onTouchStart={touchstart}
        onTouchMove={touchmove}
        onTouchEnd={touchend}
        id='draggable'
        style={{ top: elementY }}
      > 
        <View className={`${s.touch} ${s.page_5}`}>5</View>
        {pages.map((item) =>(
          <View id='box' key={item} className={`${s.touch} ${s[`page_${item}`]}`}>{item}</View>
        ))}
        <View className={`${s.touch} ${s.page_1}`}>1</View>
     </View>
    </View>
  )
}